function Frame(parent, x, y, w, h, onCreate) {
	this.x = x;
	this.y = y;
	this.w = w;
	this.h = h;
	this.children = [];
	this.regions = [];
	if (parent) parent.addChild(this);
	if(onCreate) onCreate.call(this);
}

Frame.prototype = {
	_drawFrameContent: true,
	addChild: function (child) {
		if (child.parent) {
			if (child.parent == this) return;
			child.parent.removeChild(child);
		}
		this.children.push(child);
		child.parent = this;
	},
	removeChild: function (child) {
		for (var i = 0; i < this.children.length; ++i) {
			if (this.children[i] == child) {
				this.children.splice(i, 1);
				delete child.parent;
			}
		}
	},
	setBackdrop: function (b) {
		this.backdrop = b;
	},
	addRegion: function (r) {
		this.regions.push(r);
	},
	draw: function (ctx) {
		this._beginDraw(ctx);
		for (var i = 0; i < this.regions.length; ++i) {
			this.regions[i].draw(ctx);
		}
		for (var i = 0; i < this.children.length; ++i) {
			this.children[i].draw(ctx);
		}
		this._endDraw(ctx);
	},
	_beginDraw: function (ctx) {
		if (this._drawFrameContent) {
			ctx.save();
			ctx.fillStyle = "#0000FF";
			ctx.globalAlpha = 0.1;
			ctx.fillRect(this.x, this.y, this.w, this.h);
			ctx.restore();
		}

		if (this.backdrop) {
			this.backdrop.draw(ctx);
		}
	},
	_endDraw: function (ctx) {
	},
}

